<template>
  <el-dialog v-model="dialogVisible" :title="title">
    <BaseForm @cancel='handleCancel' @submit='handleSubmit' :data='data' :fields='fields'>
      <template v-slot:classesId='{item}'>
        <el-select v-model="item.classesId" multiple  placeholder="Select">
          <el-option
            v-for="option in options"
            :key="Number(option.id)"
            :label="option.name"
            :value="Number(option.id)"
          />
        </el-select>
      </template>
    </BaseForm>
  </el-dialog>
</template>

<script lang='ts'>

import { computed, defineComponent, ref, watchEffect } from '@vue/runtime-core'
import BaseForm from '@/components/form/base/index.vue'
import { ElMessage } from 'element-plus'
import { getClassesList } from '@/api/classes'
import { goodsCreate, goodsEdit } from '@/api/goods'
export default defineComponent({
  name: 'UserForm',
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
  },
  components: {
    BaseForm,
  },
  emits: ['update:visible', 'refresh'],
  setup (props, { emit }) {
    // const dialogVisible = ref(false)
    const options = ref([])

    watchEffect(async () => {
      if (props.visible) {
        const data = await getClassesList() as any
        options.value = data.rows.map(item => ({ ...item, id: String(item.id) })) || []
      }
    })

    const dialogVisible = computed({
      get () {
        return props.visible
      },
      set (value) {
        emit('update:visible', value)
      },
    })
    const fields = [
      {
        value: 'brand',
        label: '商品品牌',
      },
      {
        value: 'name',
        label: '商品名称',
      },
      {
        value: 'price',
        label: '商品现价',
        type: 'el-input-number',
        props: { precision: 2, min: 0, controls: false },
      },
      {
        value: 'unit',
        label: '商品单位',
      },
      {
        value: 'weight',
        label: '商品规格',
      },
      // {
      //   value: 'originPrice',
      //   label: '商品原价',
      //   type: 'el-input-number',
      //   props: { precision: 2, min: 0, controls: false },
      // },
      {
        value: 'stock',
        label: '商品库存',
        type: 'el-input-number',
        props: { precision: 0, min: 0, controls: false },
      },

      {
        value: 'classesId',
        label: '所属分类',
        slot: true,
      },
    ]
    async function handleSubmit (data) {
      const price = data.price * 100
      // const originPrice = data.originPrice * 100
      const classesId = data.classesId.toString()
      if (data.id) {
        await goodsEdit({ ...data, classesId, price })
      } else {
        await goodsCreate({ ...data, classesId, price })
      }
      emit('update:visible', false)
      emit('refresh')
      ElMessage.success('操作成功')
    }
    function handleCancel () {
      emit('update:visible', false)
    }
    return {
      dialogVisible,
      fields,
      options,
      handleCancel,
      handleSubmit,
    }
  },
})
</script>

<style scoped lang="less">
  :deep(.el-input-number .el-input__inner){
    text-align: left;
  }
</style>
